import Layout from "./Layout"
import {Row, Col} from 'antd'
import { useEffect } from "react"
import { useParams } from "react-router-dom"
import { useDispatch, useSelector } from "react-redux"
import { product_by_id } from "../../store/actions/productInfo"
import ProductItem from './ProductItem'
function Product () {
    const {productId} = useParams()
    const product = useSelector(state => state.productInfo)
    console.log(product)
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(product_by_id({productId}))
    },[])
    return (
        <Layout title="商品名称" subTitle="商品详情">
            <Row gutter={[16,16]}>
                <Col span={18}>
                    {
                        Object.keys(product).length>0 &&
                        <ProductItem product={product} imgStyle={{width: "50%", margin: "0 auto"}} showView={false} showCart={true}></ProductItem>
                    }
                    
                </Col>
                <Col span={6}>right</Col>
            </Row>

        </Layout>
    )

}
export default Product